<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Gantt</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ganttView.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.2.custom.css"/>
    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
    <script type="text/javascript" src="js/gantt-date.js"></script>
    <script type="text/javascript" src="js/holidays.js"></script>
    <script type="text/javascript" src="js/jquery.ganttView.js"></script>
</head>

<body>
<div id="ganttChart"></div>
<br/>
<div id="ganttData" style="display: none">
    <div class="ganttData-item">
        <div class="ganttData-header">Item ID</div>
        <div class="ganttData-input"><input type="text" id="ganttData-item-id"/></div>
    </div>
    <div class="ganttData-item">
        <div class="ganttData-header">Item Name</div>
        <div class="ganttData-input"><input type="text" id="ganttData-item-name"/></div>
    </div>
    <div class="ganttData-item">
        <div class="ganttData-header">Series ID</div>
        <div class="ganttData-input"><input type="text" id="ganttData-series-id"/></div>
    </div>
    <div class="ganttData-item">
        <div class="ganttData-header">Series Name</div>
        <div class="ganttData-input"><input type="text" id="ganttData-series-name"/></div>
    </div>
    <div class="ganttData-item">
        <div class="ganttData-header">Start</div>
        <div class="ganttData-input"><input type="text" id="ganttData-series-start"/></div>
    </div>
    <div class="ganttData-item">
        <div class="ganttData-header">End</div>
        <div class="ganttData-input"><input type="text" id="ganttData-series-end"/></div>
    </div>
    <div class="ganttData-item">
        <div class="ganttData-header">Series Text</div>
        <div class="ganttData-input"><input type="text" id="ganttData-series-text"/></div>
    </div>
    <div class="ganttData-item">
        <input type="button" id="ganttData-reset" value="复位"/>
        <input type="button" id="ganttData-add" value="追加"/>
        <input type="button" id="ganttData-refresh" value="更新"/>
        <input type="button" id="ganttData-delete" value="削除"/>
    </div>
</div>
</body>
<script type="text/javascript">

    $(function () {
        var ganttData2 = [

            {
                id: 1031,
                name: "task1-督办",
                text: "task1-督办",
                start: new Date(2019, 6, 16, 4, 30),
                end: new Date(2019, 6, 18, 15, 45),
                state: 0,
                cycle: 0,
                delay: 1,
                lastChild: true
            },

            {
                id: 110, name: "主任务", series: [
                    {
                        id: 111, name: "执行任务", serieslevel: [
                            {
                                id: 1111,
                                name: "task1-执行",
                                text: "task1-执行",
                                start: new Date(2019, 6, 17, 4, 30),
                                end: new Date(2019, 6, 18, 15, 45),
                                state: 0,
                                cycle: 1,
                                approve: 1,
                                schedule: 50
                            },
                            {
                                id: 1112,
                                name: "task2-执行",
                                text: "task2-执行",
                                start: new Date(2019, 6, 15, 7, 30),
                                end: new Date(2019, 6, 17, 12, 30),
                                state: 3,
                                cycle: 0,
                                star: 6
                            },
                            {
                                id: 1113,
                                name: "task3-执行",
                                text: "task3-执行",
                                start: new Date(2019, 6, 15, 8, 30),
                                end: new Date(2019, 6, 17, 13, 30),
                                state: 2,
                                cycle: 1,
                                delay: 1,
                                private: 1,
                                schedule: 50,
                                lastChild: true
                            },
                        ]
                    }
                ]
            },
            {
                id: 120, name: "主任务", series: [
                    {
                        id: 121, name: "执行任务", serieslevel: [
                            {
                                id: 1211,
                                name: "task1-执行",
                                text: "Test1：需求评审",
                                start: new Date(2019, 06, 18, 3, 30),
                                end: new Date(2019, 06, 18, 15, 45),
                                state: 3,
                                approve: 1,
                                schedule: 10,
                                lastChild: true
                            },
                        ]
                    }
                ]
            },
            {
                id: 130, name: "主任务", series: [
                    {
                        id: 131, name: "执行任务", serieslevel: [
                            {
                                id: 1311,
                                name: "task1-执行",
                                text: "task1-执行",
                                start: new Date(2019, 06, 18, 3, 30),
                                end: new Date(2019, 06, 18, 20, 45),
                                state: 2,
                                delay: 1,
                                lastChild: true
                            },
                        ]
                    }
                ]
            },
            {
                id: 140, name: "主任务", series: [
                    {
                        id: 1411,
                        name: "task1",
                        text: "Test1：你们",
                        start: new Date(2019, 06, 14, 3, 30),
                        end: new Date(2019, 06, 14, 15, 45),
                        readOnly: true,
                        state: 1,
                        cycle: 1,
                        approve: 1,
                        star: 1
                    },
                    {
                        id: 1412,
                        name: "task2",
                        text: "Test1-2",
                        start: new Date(2019, 06, 15, 6, 30),
                        end: new Date(2019, 06, 17, 12, 30),
                        state: 0,
                        lastChild: true
                    },
                    {
                        id: 1413,
                        name: "task33",
                        text: "Test1-2222",
                        start: new Date(2019, 06, 15, 6, 30),
                        end: new Date(2019, 07, 17, 12, 30),
                        state: 0,
                        lastChild: true
                    }
                ]
            },
        ];
        var selectedObj = null;
        $("#ganttChart").ganttView({
            // ganttScale: "hours",// months  weeks days  hours
            showWeekends: true, //是否现在周末高亮
            showLine: true,//是否显示 当前时间线(为"周"时显示背景颜色)
            data: ganttData2, //数据来源
            vtHeaderWidth: 300,//左侧任务模块宽度
            cellWidth: 50, //格子宽度(ganttScale = hours/weeks:宽度重新计算 最小为50)
            cellHeight: 40,//格子行高
            titileHeight: 40,//标题行高
            start: new Date(2019, 06, 14), //范围最小时间(请根据 ganttScale 参数调节初始时间范围)
            end: new Date(2019, 07, 30), //范围最大时间
            slideWidth: '100%',//甘特图宽度
            excludeWeekends: true,//排除星期的最后一天
            showDayOfWeek: true,//是否显示星期
            showHolidays: false,//显示节假日
            excludeHolidays: false,//排除节假日
            gridHoverL: true,//是否显示鼠标移入效果(列)
            gridHoverH: true,//是否显示鼠标移入效果(行)
            isUnfold: true,//模块下任务超过2条 显示展开收起按钮
            unfoldConfig: false,//初始化展开/收起(模块下任务超过2条 显示展开收起按钮) true:收起
            clicked: function (o) {
                selectedObj = o;
                var data = selectedObj.data('block-data');
                var itemName = data.itemName ? data.itemName : "";
                var seriesName = data.seriesName ? data.seriesName : "";
                var text = data.text ? data.text : "";
                var sYYYY = data.start.getYear();
                sYYYY = sYYYY < 1000 ? sYYYY + 1900 : sYYYY;
                var sMM = data.start.getMonth() + 1;
                var sDD = data.start.getDate();
                var eYYYY = data.end.getYear();
                eYYYY = eYYYY < 1000 ? eYYYY + 1900 : eYYYY;
                var eMM = data.end.getMonth() + 1;
                var eDD = data.end.getDate();
                $('#ganttData-item-id').val(data.itemId);
                $('#ganttData-item-name').val(itemName);
                $('#ganttData-series-id').val(data.seriesId);
                $('#ganttData-series-name').val(seriesName);
                $('#ganttData-series-start').val(sYYYY + "/" + sMM + "/" + sDD);
                $('#ganttData-series-end').val(eYYYY + "/" + eMM + "/" + eDD);
                $('#ganttData-series-text').val(text);
                console.log(`${data.itemId} ${itemName} ${data.seriesId} ${seriesName} ${sYYYY + "/" + sMM + "/" + sDD} ${eYYYY + "/" + eMM + "/" + eDD}`)
            },

            dblClicked: function (o) {
                if (selectedObj == null) {
                    return;
                }
                if (selectedObj.data('block-data').seriesId == o.data('block-data').seriesId) {
                    $('#ganttData-reset').trigger("click");
                }
            },
            changed: function (o) {
                o.trigger("click");
            }
        });
        $('#ganttData-add').click(function () {
            var name = $('#ganttData-series-name').val();
            name = (name == "") ? null : name;
            var text = $('#ganttData-series-text').val();
            text = (text == "") ? null : text;
            var start = $('#ganttData-series-start').val().split("/");
            var end = $('#ganttData-series-end').val().split("/");
            var data = [{
                id: parseInt($('#ganttData-item-id').val()),
                name: $('#ganttData-item-name').val(),
                series: [{
                    id: parseInt($('#ganttData-series-id').val()),
                    name: name,
                    text: text,
                    start: new Date(start[0], parseInt(start[1]) - 1, start[2]),
                    end: new Date(end[0], parseInt(end[1]) - 1, end[2]),
                }]
            }];
            $().ganttView.addData(data);
        });
        $('#ganttData-refresh').click(function () {
            if (selectedObj == null) {
                return;
            }
            var data = selectedObj.data('block-data');
            data.itemName = $('#ganttData-item-name').val();
            data.seriesName = $('#ganttData-series-name').val();
            var start = $("#ganttData-series-start").val().split("/");
            data.start = new Date(start[0], parseInt(start[1]) - 1, start[2]);
            var end = $("#ganttData-series-end").val().split("/");
            data.end = new Date(end[0], parseInt(end[1]) - 1, end[2]);
            data.text = $('#ganttData-series-text').val();
            selectedObj.refreshGanttData();

        });
        $('#ganttData-delete').click(function () {
            if (selectedObj == null) {
                return;
            }
            selectedObj.deleteGanttData(selectedObj);
            $('#ganttData-reset').trigger("click");
        });
        $('#ganttData-reset').click(function () {
            selectedObj = null;
            $('.ganttData-input input').val("");
        });
    });

</script>
</html>
